<script setup lang="ts">
import {ref, onMounted, onUnmounted} from 'vue';
import * as echarts from 'echarts';


// 写死的数据，后续可以替换为接口数据
const chartData = ref({
  categories: ['养老保险', '医疗保险', '失业保险', '工伤保险', '生育保险'],
  values: [1200, 800, 300, 450, 200]
});

// 存储图表实例的引用
const charts = ref({
  barChart: null,
  barChart2: null,
  pieChart: null,
  lineChart: null
});

// 初始化图表的函数
const initChart = (domId, chartType, title) => {
  const chartDom = document.getElementById(domId);
  if (!chartDom) return null;

  // 先检查是否已有实例
  let chart = echarts.getInstanceByDom(chartDom);
  if (!chart) {
    chart = echarts.init(chartDom);
  }

  const option = {
    title: {
      text: title
    },
    tooltip: chartType === 'pie' ? { trigger: 'item' } : {},
    xAxis: chartType !== 'pie' ? {
      type: 'category',
      data: chartData.value.categories
    } : undefined,
    yAxis: chartType !== 'pie' ? {
      type: 'value'
    } : undefined,
    series: [
      {
        name: '参保人数',
        type: chartType,
        data: chartType === 'pie' 
          ? chartData.value.categories.map((category, index) => ({
              name: category,
              value: chartData.value.values[index]
            }))
          : chartData.value.values,
        ...(chartType === 'pie' ? {
          radius: '50%',
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        } : {})
      }
    ]
  };

  chart.setOption(option);
  return chart;
};

onMounted(() => {
  // 初始化所有图表
  charts.value.barChart = initChart('bar-chart-1', 'bar', '社保局参保信息分析（柱状图1）');
  charts.value.barChart2 = initChart('bar-chart-2', 'bar', '社保局参保信息分析（柱状图2）');
  charts.value.pieChart = initChart('pie-chart', 'pie', '社保局参保信息分析（饼图）');
  charts.value.lineChart = initChart('line-chart', 'line', '社保局参保信息分析（折线图）');

  // 添加窗口 resize 监听
  const handleResize = () => {
    Object.values(charts.value).forEach(chart => {
      chart && chart.resize();
    });
  };
  window.addEventListener('resize', handleResize);

  // 将 handleResize 函数存储在组件实例上，以便在卸载时移除
  charts.value.handleResize = handleResize;
});

onUnmounted(() => {
  // 移除 resize 事件监听
  if (charts.value.handleResize) {
    window.removeEventListener('resize', charts.value.handleResize);
  }

  // 销毁所有图表实例
  Object.values(charts.value).forEach(chart => {
    if (chart && typeof chart.dispose === 'function') {
      chart.dispose();
    }
  });
});
</script>

<template>
  <div class="charts-wrapper">
    <!-- 第一行 -->
    <div class="chart-row">
      <div class="chart-item">
        <div id="bar-chart-1" class="chart"></div>
      </div>
      <div class="chart-item">
        <div id="pie-chart" class="chart"></div>
      </div>
    </div>

    <!-- 第二行 -->
    <div class="chart-row">
      <div class="chart-item">
        <div id="bar-chart-2" class="chart"></div>
      </div>
      <div class="chart-item">
        <div id="line-chart" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.charts-wrapper {
  padding: 20px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.chart-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-item {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease;
}

.chart-item:hover {
  transform: translateY(-5px);
}

.chart {
  width: 100%;
  height: 400px;
}

/* 响应式处理 */
@media (max-width: 1200px) {
  .charts-wrapper {
    padding: 15px;
  }

  .chart {
    height: 350px;
  }
}

@media (max-width: 992px) {
  .chart-row {
    flex-wrap: wrap;
  }

  .chart-item {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .chart-item {
    flex: 0 0 100%;
  }

  .chart {
    height: 300px;
  }
}
</style>
